<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>

    <!-- 重置样式 -->
    <link rel="stylesheet" href="../../assets/css/normalize.css" />
    <link rel="stylesheet" href="../../assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="../../assets/css/property.css" />
    <link rel="stylesheet" href="../../assets/css/basic.css" />

    <!-- animate.css动画库 -->
    <link rel="stylesheet" href="../../libs/animate/animate.css" />

    <!-- swiper引入使用轮播图 -->
    <link rel="stylesheet" href="../../libs/swiper8/swiper-bundle.min.css" />

    <!-- icon图标 -->
    <link rel="stylesheet" href="../../icons/iconfont.css" />

    <!-- 底部公共样式 -->
    <link rel="stylesheet" href="../../assets/css/basic.css" />

    <!-- 当前样式 -->
    <link rel="stylesheet" href="./home.css" />
  </head>

  <body class="dpflex fdcolumn">
    <header>
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../../assets/imgs/course-img02.png" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../../assets/imgs/course-img04.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../../assets/imgs/part1.png" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </header>

    <div class="main dpflex">
      <div class="ranking">
        <span class="iconfont icon-jiangbei"></span>
        <span class="text">今日排名</span>
        <span class="num">9</span>
      </div>
      <div class="clock">
        <span class="iconfont icon-qiandao"></span>
        <p class="text">累计打卡23天</p>
        <span class="today">今日打卡</span>
      </div>
      <div class="data"></div>
      <div class="badge">
        <span class="iconfont icon-xunzhang"></span>
        <span class="text">累计运动勋章</span>
        <div><span class="num">3</span>枚</div>
      </div>
      <div class="curriculum"></div>
      <div class="run"></div>
    </div>

    <footer>
      <ul class="dpflex">
        <li class="dpflex">
          <a href="#" class="dpflex after"
            ><span class="iconfont icon-shouye"></span>首页</a
          >
        </li>
        <li class="dpflex">
          <a href="#" class="dpflex"
            ><span class="iconfont icon-tubiaozhizuomoban"></span>运动</a
          >
        </li>
        <li class="dpflex">
          <a href="#" class="dpflex"
            ><span class="iconfont icon-quanzi"></span>圈子</a
          >
        </li>
        <li class="dpflex">
          <a href="#" class="dpflex"
            ><span class="iconfont icon-wode"></span>我的</a
          >
        </li>
      </ul>
    </footer>
  </body>
  <script src="../../libs/swiper8/swiper-bundle.min.js"></script>
  <script src="./home.js"></script>
</html>
